<template>
  <div class="pageOut">
    <div class="pageIn">
      <el-form :inline="true" :model="formSearch" size="small">
        <el-form-item>
          <el-select
            clearable
            v-model="formSearch.commercialId"
            placeholder="请选择商户"
          >
            <el-option
              v-for="item in commercialList"
              :key="item.id"
              :label="item.merchantName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            clearable
            v-model="formSearch.affiliationId"
            placeholder="请选择属性"
          >
            <el-option label="代理" value="2"> </el-option>
            <el-option label="自营" value="1"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" @click="search">查询</el-button>
          <el-button
            icon="el-icon-plus"
            type="primary"
            @click="handleAdd"
            v-show="permission.add"
            >添加</el-button
          >
        </el-form-item>
      </el-form>
      <el-table
        border
        ref="table"
        :height="height - 170"
        :data="tableData"
        :header-cell-style="{ background: '#FAFAFA', color: '#606266' }"
        v-loading="loading"
        element-loading-background="rgba(255, 255, 255, 0.5)"
        style="width: 100%"
      >
        <el-table-column
          prop="deviceCode"
          :show-overflow-tooltip="tooltip"
          label="设备编号"
        ></el-table-column>
        <el-table-column
          prop="deviceName"
          :show-overflow-tooltip="tooltip"
          label="设备名称"
        ></el-table-column>
        <el-table-column
          prop="selfName"
          :show-overflow-tooltip="tooltip"
          label="设备属性"
        ></el-table-column>
        <el-table-column
          prop="merchantName"
          :show-overflow-tooltip="tooltip"
          label="所属商户"
        ></el-table-column>
        <el-table-column
          prop="address"
          :show-overflow-tooltip="tooltip"
          label="地址"
        ></el-table-column>
        <el-table-column
          v-if="permission.SizeList"
          prop="commission"
          label="分佣管理"
          align="center"
        >
          <template slot-scope="scope">
            <el-link type="primary" @click="splitTypeClick(scope.row)"
              >点击查看</el-link
            >
            <!-- <div class="img" style="cursor: pointer">
              <viewer>
                <img
                  :src="scope.row.wx_img"
                  alt
                  :onerror="errImg"
                  title="查看高清图片"
                  style="width: 40px; height: 40px; border-radius: 50%"
                />
              </viewer>
            </div> -->
          </template>
        </el-table-column>

        <el-table-column prop="usageName" width="150" label="使用状态">
          <!-- <template slot-scope="scope">
            <el-tag type="success" size="small" v-if="scope.row.status == 1"
              >正常</el-tag
            >
            <el-tag type="danger" size="small" v-if="scope.row.status == 2"
              >停用</el-tag
            >
          </template> -->
        </el-table-column>

        <el-table-column prop="workName" width="150" label="连网状态">
        </el-table-column>
        <el-table-column
          prop="launch_time"
          width="250"
          label="投放日期"
          :show-overflow-tooltip="tooltip"
        ></el-table-column>
        <!-- <el-table-column
          prop="create_time"
          width="200"
          label="创建时间"
          :show-overflow-tooltip="tooltip"
        ></el-table-column> -->

        <el-table-column fixed="right" label="操作" width="320" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="goBoxList(scope.row)"
              v-show="permission.BoxList"
              >格口管理</el-button
            >
            <el-button
              size="mini"
              @click="goSizeList(scope.row)"
              v-show="permission.del"
              >二维码</el-button
            >

            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.row)"
              v-show="permission.edit"
              >编辑</el-button
            >
            <!-- <el-button
              type="danger"
              size="mini"
              @click="handleDel(scope.row.id)"
              v-show="permission.del"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

      <!-- 设备添加和设备编辑 -->
      <el-drawer
        size="400px"
        :title="type === 'add' ? '添加' : '修改'"
        :visible.sync="visible"
        @close="onCancel('ruleForm')"
        custom-class="custom_drawer"
      >
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-position="top"
          size="mini"
          label-width="80px"
          class="form-drawer__main"
        >
          <el-form-item
            label="设备名称"
            prop="name_locker"
            style="margin-bottom: 30px"
          >
            <el-input
              clearable
              v-model="ruleForm.name_locker"
              placeholder="请输入设备名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="设备编号"
            prop="deviceCode"
            style="margin-bottom: 30px"
          >
            <el-input
              @input="inputs"
              clearable
              v-model="ruleForm.deviceCode"
              placeholder="请输入设备编号"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="设备属性"
            prop="device_id"
            style="margin-bottom: 30px"
          >
            <el-select
              v-model="ruleForm.device_id"
              clearable
              filterable
              placeholder="请选择设备属性"
              style="width: 250px"
            >
              <el-option
                v-for="(item, index) in attributeList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="所属商户"
            prop="merchantId"
            style="margin-bottom: 30px"
          >
            <el-select v-model="ruleForm.merchantId" placeholder="请选择商户">
              <el-option
                v-for="item in commercialList"
                :key="item.id"
                :label="item.merchantName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="投放日期"
            prop="project_time"
            style="margin-bottom: 30px"
          >
            <el-date-picker
              :picker-options="pickerOptions"
              value-format="yyyy-MM-dd"
              v-model="ruleForm.project_time"
              type="date"
              placeholder="投放日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-form-item
            label="设备地址"
            prop="address"
            style="margin-bottom: 30px"
          >
            <el-input
              disabled
              clearable
              v-model="ruleForm.address"
              placeholder="请输入设备地址"
            >
              <el-button
                slot="append"
                @click="location"
                icon="el-icon-location"
              ></el-button>
            </el-input>
          </el-form-item>
          <el-form-item
            label="详细地址"
            prop="detailedAddress"
            style="margin-bottom: 30px"
          >
            <el-input
              clearable
              v-model="ruleForm.detailedAddress"
              placeholder="请输入详细地址"
            >
            </el-input>
          </el-form-item>
          <!--  -->
          <el-form-item
            label="是否启用"
            prop="is_enabled"
            style="margin-bottom: 30px"
          >
            <el-radio v-model="ruleForm.is_enabled" :label="1">启用</el-radio>
            <el-radio v-model="ruleForm.is_enabled" :label="2">停用</el-radio>
          </el-form-item>
        </el-form>
        <div class="form-drawer__footer" style="width: 400px">
          <el-button @click="onCancel('ruleForm')" size="small"
            >取 消</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="onConfirm('ruleForm')"
            :loading="confirmLoading"
            >{{ confirmLoading ? "提交中 ..." : "确 定" }}</el-button
          >
        </div>
      </el-drawer>
      <!-- 地图弹框 -->
      <el-dialog :show-close="false" :visible.sync="MapVisible" width="600px">
        <!-- style="width:400px;height:400px" -->
        <div>
          <SelectMap
            v-if="MapVisible"
            @getMapInfo="getMapInfo"
            :center="ruleForm.center"
            style="height: 600px"
          />
        </div>
        <div slot="footer">
          <el-button @click="MapVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleMap">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 二维码 -->
      <el-dialog
        width="40% "
        :visible.sync="qrCodevisible"
        custom-class="custom_drawer"
      >
        <div class="flexRow">
          <div class="qrBox">
            <span class="texthidden"><b>设备ID：</b>{{ lockerRow.id }}</span>
            <span class="texthidden"
              ><b>所属商户</b>：{{ lockerRow.merchantName }}</span
            >
          </div>
          <div class="qrBox">
            <span class="texthidden"
              ><b>设备名字</b>：{{ lockerRow.deviceName }}</span
            >

            <span class="texthidden"
              ><b>设备地址</b>：{{ lockerRow.address }}</span
            >
          </div>
        </div>
        <div class="flexRow">
          <img :src="qrImg" alt="" width="200px" height="200px" />
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="qrCodevisible = false" size="small"
            >取 消</el-button
          >
        </div>
      </el-dialog>

      <!-- 分佣设置 -->
      <el-dialog
        title="分佣管理"
        width="50% "
        :visible.sync="splitvisible"
        custom-class="custom_drawer"
      >
        <el-form
          :model="splitForm"
          ref="splitForm"
          :rules="splitRules"
          label-width="90px"
          style="padding-top: 20px"
        >
          <div class="row" style="width: 90%">
            <el-form-item label="分成人" prop="splitUser">
              <el-input
                style="width: 180px"
                v-model="splitForm.splitUser"
                disabled
              >
              </el-input>
            </el-form-item>

            <el-form-item label="分成比例" prop="platformProportion">
              <el-input
                style="width: 180px"
                v-model="splitForm.platformProportion"
                oninput="this.value=this.value.replace(/[^\d]/g,'')"
                placeholder="请输入分成比例"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="备注" prop="platformRemark">
              <el-input
                maxlength="255"
                style="width: 180px"
                v-model="splitForm.platformRemark"
                placeholder="请输入备注"
              >
              </el-input>
            </el-form-item>
          </div>
          <div class="row" style="width: 90%">
            <el-form-item label="分成人" prop="merchantName">
              <el-input
                style="width: 180px"
                v-model="splitForm.merchantName"
                disabled
              >
              </el-input>
            </el-form-item>

            <el-form-item label="分成比例" prop="merchantProportion">
              <el-input
                style="width: 180px"
                v-model="splitForm.merchantProportion"
                oninput="this.value=this.value.replace(/[^\d]/g,'')"
                placeholder="请输入分成比例"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="备注" prop="merchantRemark">
              <el-input
                style="width: 180px"
                v-model="splitForm.merchantRemark"
                placeholder="请输入备注"
              >
              </el-input>
            </el-form-item>
          </div>

          <div
            class="row"
            v-for="(goods, index) in splitForm.agent"
            :key="index + 1"
          >
            <el-form-item
              label="分成人"
              :prop="'agent.' + index + '.customerId'"
            >
              <el-select
                v-model="goods.customerId"
                style="width: 180px"
                clearable
                placeholder="请选择分成人"
                filterable
              >
                <el-option
                  v-for="(item, idx) in payTypeList"
                  :disabled="lockChange().indexOf(item.id) > -1"
                  :key="idx"
                  :label="item.agentName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="分成比例"
              :prop="'agent.' + index + '.proportion'"
            >
              <el-input
                style="width: 180px"
                v-model="goods.proportion"
                oninput="this.value=this.value.replace(/[^\d]/g,'')"
                placeholder="请输入分成比例"
              >
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                style="width: 180px"
                v-model="goods.remark"
                placeholder="请输入备注"
              >
              </el-input>
            </el-form-item>
            <div style="width: 95px; display: flex">
              <div
                v-show="index === splitForm.agent.length - 1"
                @click.prevent="addDomain(goods, index)"
                class="el-icon-plus primary"
              ></div>
              <div
                v-show="splitForm.agent.length != 1"
                @click.prevent="removeDomain(goods, index)"
                class="el-icon-delete danger"
              ></div>
            </div>
          </div>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="splitvisible = false" size="small"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="setShare('splitForm')"
            :loading="confirmLoading"
            >{{ confirmLoading ? "保存中..." : "保 存" }}</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  deviceList,
  deviceDel,
  deviceAdd,
  deviceEdit,
  MAIN,
  merchantList,
  deviceOfSel,
  setShare,
  getShare,
  equipmentQRcodes,
} from "../../utils/api";
import UploadImage from "../../components/UploadImage";
import test from "../Member/test";
import SelectMap from "../../components/SelectMap";

export default {
  name: "LockerList",
  props: ["height"],
  components: {
    UploadImage,
    test,
    SelectMap,
  },
  data() {
    return {
      qrImg: "",
      splitForm: {
        splitUser: "平台",
        platformRemark: "",
        platformProportion: 0,
        merchantName: "", //商户名称
        merchantProportion: "",
        merchantRemark: "",
        agent: [{ customerId: "", proportion: "", remark: "" }],
      },
      confirmLoading: false,
      // 时间禁用
      payTypeList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7; //禁用今日之前的日期
          // return time.getTime() > Date.now(); //禁用今日之后的日期
        },
        // disabledDate: (time) => time.getTime() > new Date() * 1 + 600 * 1000,
      },
      qrCodevisible: false,
      options: {
        type: "picture-card",
      }, //上传图片配置项
      attributeList: [
        { id: 1, name: "自营" },
        {
          id: 2,
          name: "代理",
        },
      ],

      splitvisible: false, //分佣设置
      tableData: [],
      tooltip: true, //内容过长被隐藏时显示 tooltip
      loading: true, //显示加载表格
      pageSize: 10, //每页多少条
      currentPage: 1, //当前第几页
      pageSizes: [10, 20, 30, 40, 50], //每页选择条数
      total: 0, //共多少条
      errImg: 'this.src="' + require("../../../static/img/user.png") + '"',
      permission: {
        add: false,
        edit: false,
        del: false,
        BoxList: false,
        SizeList: false,
      }, //权限
      formSearch: {
        name_locker: "",
        time: "", // 时间
        affiliationId: "",
        commercialId: "",
      }, //搜索
      commercialList: [], // 商户下拉
      affiliationList: [], //归属下拉
      //编辑弹窗
      visible: false,
      confirmLoading: false,
      type: "",
      currentRow: {}, //当前行数据信息
      ruleForm: {
        center: [116.397128, 39.916527],
        name_locker: "",
        address: "",
        remark: "",
        is_enabled: 1,
        device_id: "",
        longitude: "",
        latitude: "",
        phone_charge: "",
        wx_img: "",
        project_time: "",
        merchantId: "",
        deviceCode: "",
        detailedAddress: "",
      }, //添加和修改的表单
      agentId: "",
      lockerRow: {},
      splitRules: {
        platformProportion: [
          { required: true, message: "请输入平台分成比例", trigger: "blur" },
        ],
        merchantProportion: [
          { required: true, message: "请输入商户分成比例", trigger: "blur" },
        ],
        // merchantName: [
        //   { required: true, message: "请选择商户", trigger: "blur" },
        // ],
      },
      rules: {
        name_locker: [
          { required: true, message: "请输入设备名称", trigger: "change" },
        ],
        deviceCode: [
          { required: true, message: "请输入编号", trigger: "change" },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "change" }],
        is_enabled: [
          { required: true, message: "请选择是否启用", trigger: "change" },
        ],
        merchantId: [
          { required: true, message: "请选择所属商户", trigger: "change" },
        ],
        detailedAddress: [
          { required: true, message: "请输入详细地址", trigger: "change" },
        ],
        // remark: [{ required: true, message: "请输入描述", trigger: "blur" }],
        device_id: [
          { required: true, message: "请选择设备属性", trigger: "blur" },
        ],

        // phone_charge: [
        //   { required: true, message: "请输入负责人手机号", trigger: "blur" },
        //   {
        //     validator: function (rule, value, callback) {
        //       if (/^1[34578]\d{9}$/.test(value) == false) {
        //         callback(new Error("请输入正确的手机号"));
        //       } else {
        //         callback();
        //       }
        //     },
        //     trigger: "blur",
        //   },
        // ],

        project_time: [
          { required: true, message: "请选择投放日期", trigger: "change" },
        ],
      },
      project: {}, //项目下拉列表
      MapVisible: false, //地图的弹出框
      ap: {}, //地图的经纬度
      userInfo: {},
    };
  },

  mounted() {
    this.getResource();
    if (this.$route.query.agentId) {
      this.agentId = this.$route.query.agentId;
      this.getData();
    }
    if (this.$route.query.merchantId) {
      this.formSearch.commercialId = this.$route.query.merchantId;
      this.getData();
    }
  },
  methods: {
    getDevceAgent(row) {
      this.postRequest(deviceOfSel, { deviceId: row.id }, MAIN).then((res) => {
        if (res.code === 200) {
          this.payTypeList = res.data;
        }
      });
    },
    getResource() {
      // console.log(this.$route.name);
      this.loading = true;
      const userinfo = JSON.parse(sessionStorage.getItem("userInfo")); //解密,获取用户登录信息
      this.userInfo = userinfo;
      let arr = userinfo.menu_id.split(",");
      // console.log(arr)
      // 新增设备 52
      // 修改设备 53
      // 二维码 54
      // 格口列表 55
      // 查看分佣 59
      if (arr.indexOf("52") > -1) {
        this.permission.add = true;
      }
      if (arr.indexOf("53") > -1) {
        this.permission.edit = true;
      }

      if (arr.indexOf("54") > -1) {
        this.permission.del = true;
      }

      if (arr.indexOf("55") > -1) {
        this.permission.BoxList = true;
      }

      if (arr.indexOf("59") > -1) {
        this.permission.SizeList = true;
      }
      this.getData();
      this.getMerchantList();
    },

    getMerchantList() {
      this.postRequest(merchantList, {}, MAIN).then((res) => {
        if (res.code == 200) {
          this.commercialList = res.data;
        }
      });
    },
    // 选择经纬度
    handleMap() {
      this.MapVisible = false;
    },

    // 设备主图
    getImgSrc(e) {
      this.ruleForm.wx_img = e;
    },
    setShare(splitForm) {
      this.$refs[splitForm].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          let params = {
            deviceId: this.currentRow.id,
            userId: this.userInfo.id,
            platformProportion: this.splitForm.platformProportion,
            platformRemark: this.splitForm.platformRemark,
            merchantProportion: this.splitForm.merchantProportion,
            merchantRemark: this.splitForm.merchantRemark,
            agent: this.splitForm.agent,
          };
          this.postRequest(setShare, params, MAIN).then((res) => {
            if (res.code === 200) {
              this.confirmLoading = false;
              this.$notify.success(res.msg);
              this.getData();
              this.splitvisible = false;
            } else {
              this.confirmLoading = false;
            }
          });
        } else {
          return false;
        }
      });
    },
    //获取初始数据
    getData() {
      this.loading = true;
      let start_time, end_time;
      if (this.formSearch.time != "" && this.formSearch.time != null) {
        start_time = this.formSearch.time[0] + " 00:00:00";
        end_time = this.formSearch.time[1] + " 23:59:59";
      }
      let params = {
        merchantId: this.formSearch.commercialId,
        isSelf: this.formSearch.affiliationId,
        start_time,
        end_time,
        pageNumber: this.currentPage,
        pageSize: this.pageSize,
        agentId: this.agentId,
      };
      this.postRequest(deviceList, params, MAIN).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.loading = false;
          this.$nextTick(() => {
            //避免表格表头样式错乱
            if (this.$refs.table) this.$refs.table.doLayout();
          });
        }
      });
    },

    //分页
    handleSizeChange(val) {
      //每页 ${val} 条
      this.pageSize = val;
      this.getData();
    },
    inputs(val) {
      console.log(val);
      let as = /^[0-9A-Za-z]+$/;
      let flag = as.test(val);
      if (!flag) {
        this.ruleForm.deviceCode = "";
        this.$notify.error("输入格式不正确");
      }
    },
    handleCurrentChange(val) {
      //当前页
      this.currentPage = val;
      this.getData();
    },
    //查询
    search() {
      this.currentPage = 1;
      this.getData();
    },
    //新增
    handleAdd() {
      this.type = "add";
      this.currentRow = {};
      this.visible = true;
    },
    //编辑
    handleEdit(row) {
      this.type = "edit";
      this.currentRow = row;
      this.visible = true;
      this.ruleForm = {
        name_locker: row.deviceName,
        address: row.address,
        remark: "",
        is_enabled: row.usageStatus,
        device_id: row.isSelf,
        is_broken_network: "",
        merchantId: row.merchantId,
        wx_img: "",
        project_time: row.launch_time,
        deviceCode: row.deviceCode,
        detailedAddress: row.detailedAddress,
        center:
          row.lon && row.lat ? [row.lon, row.lat] : [116.397128, 39.916527],
      };
    },

    //删除
    handleDel(id) {
      let parm = {
        id: id,
        userId: this.userInfo.id,
      };
      this.$confirm("确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.postRequest(deviceDel, parm, MAIN).then((res) => {
            if (res.code == 200) {
              this.$notify({
                title: "删除成功",
                message: res.msg,
                type: "success",
              });
              this.getData();
            }
          });
        })
        .catch(() => {});
    },

    onConfirm(formName) {
      console.log(this.ruleForm);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          // setTimeout(() => this.onCancel(formName), 1000);
          if (this.type == "add") {
            this.lockerAdd();
          } else if (this.type == "edit") {
            this.lockerEdit();
          }
        } else {
          return false;
        }
      });
    },
    // 添加
    lockerAdd() {
      let params = {
        deviceName: this.ruleForm.name_locker,
        address: this.ruleForm.address,
        usageStatus: this.ruleForm.is_enabled,
        isSelf: this.ruleForm.device_id,
        lon: this.ruleForm.center[0],
        lat: this.ruleForm.center[1],
        merchantId: this.ruleForm.merchantId,
        launch_time: this.ruleForm.project_time,
        userId: this.userInfo.id,
        deviceCode: this.ruleForm.deviceCode,
        detailedAddress: this.ruleForm.detailedAddress,
      };

      this.postRequest(deviceAdd, params, MAIN).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$notify({
            title: "添加成功",
            message: res.msg,
            type: "success",
          });
        }
        this.onReset();
        this.getData();
      });
    },
    // 编辑
    lockerEdit() {
      let params = {
        id: this.currentRow.id,
        deviceName: this.ruleForm.name_locker,
        address: this.ruleForm.address,
        usageStatus: this.ruleForm.is_enabled,
        isSelf: this.ruleForm.device_id,
        lon: this.ruleForm.center[0],
        lat: this.ruleForm.center[1],
        merchantId: this.ruleForm.merchantId,
        launch_time: this.ruleForm.project_time,
        userId: this.userInfo.id,
        deviceCode: this.ruleForm.deviceCode,
        detailedAddress: this.ruleForm.detailedAddress,
      };

      this.postRequest(deviceEdit, params, MAIN).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.$notify({
            title: "编辑成功",
            message: res.msg,
            type: "success",
          });
        }
        this.onReset();
        this.getData();
      });
    },
    onCancel(formName) {
      this.$refs[formName].resetFields();
      this.onReset();
    },
    //清空重置表单
    onReset() {
      this.visible = false;
      this.confirmLoading = false;
      this.ruleForm = {
        name_locker: "",
        address: "",
        remark: "",
        is_enabled: 1,
        device_id: "",
        longitude: "",
        latitude: "",
        phone_charge: "",
        wx_img: "",
        project_time: "",
        center: [116.397128, 39.916527],
        deviceCode: "",
        detailedAddress: "",
      };
    },
    // 跳转到设备的规格
    goBoxList(row) {
      window.sessionStorage.setItem("lockerRow", JSON.stringify(row));
      this.$router.push({
        path: "/BoxList",
      });
    },
    goSizeList(row) {
      this.lockerRow = row;
      this.postRequest(
        equipmentQRcodes,
        { deviceCode: row.deviceCode },
        MAIN
      ).then((res) => {
        if (res.code === 200) {
          this.qrImg = res.data;
        }
      });
      this.qrCodevisible = true;
    },
    //定位
    location() {
      this.MapVisible = true;
    },
    // 查看分佣
    splitTypeClick(row) {
      this.getDevceAgent(row);
      this.currentRow = row;
      this.postRequest(getShare, { deviceId: row.id }, MAIN).then((res) => {
        if (res.code === 200) {
          this.splitForm = {
            platformProportion: res.data.platformProportion,
            platformRemark: res.data.platformRemark,
            merchantProportion: res.data.merchantProportion,
            merchantRemark: res.data.merchantRemark,
            agent:
              res.data.agent.length != 0
                ? res.data.agent
                : [{ customerId: "", proportion: "", remark: "" }],
            splitUser: "平台",
          };
          this.splitForm.merchantName = row.merchantName;
        }
      });
      this.splitvisible = true;
    },
    // 代理商禁选
    lockChange() {
      return this.splitForm.agent.map((v) => {
        return v.customerId;
      });
    },
    addDomain(row, index) {
      console.log(row);
      if (row.customerId == "") return this.$notify.error("请选择代理商");
      if (row.proportion == 0 || row.proportion == "")
        return this.$notify.error("请输入分成");
      this.splitForm.agent.push({
        customerId: "",
        proportion: "",
        remark: "",
      });
    },
    //移除动态表单项
    removeDomain(item) {
      const index = this.splitForm.agent.indexOf(item);
      if (index !== -1) {
        this.splitForm.agent.splice(index, 1);
      }
    },
    //获取位置内容
    getMapInfo(val) {
      // console.log(val);
      const pname = val.pname && val.pname !== null ? val.pname : ""; //省
      const cityname =
        val.cityname && val.cityname !== null ? val.cityname : ""; //市
      const adname = val.adname && val.adname !== null ? val.adname : ""; //区
      const address = val.address && val.address !== null ? val.address : ""; //详细地址
      const tel =
        val.tel && val.tel !== null
          ? Array.isArray(val.tel)
            ? val.tel.join(",")
            : val.tel
          : ""; //服务电话
      // this.ruleForm.cityName = val.cityname;
      this.ruleForm.address = `${pname}${cityname}${adname}${address}`;
      // this.ruleForm.detailedAddress = `${address}`;
      // this.ruleForm.tel = `${tel}`;
      this.ruleForm.center =
        val.location && val.location !== null
          ? val.location.split(",")
          : [116.397128, 39.916527]; //经纬度
      // this.ruleForm.center = val.location.split(",");
    },
  },
};
</script>

<style scoped>
/deep/ .el-input-group__append,
.el-input-group__prepend {
  background-color: #1890ff;
  color: #fff;
  cursor: pointer;
}
/deep/ .el-input--mini .el-input__inner {
  height: 32px;
  line-height: 32px;
}
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
/deep/ input[type="number"] {
  -moz-appearance: textfield;
}

/deep/ .el-upload-list--picture-card .el-upload-list__item {
  width: 121px;
  height: 121px;
}
/deep/ .el-upload--picture-card {
  width: 121px;
  height: 121px;
  line-height: 130px;
}
.flexRow {
  min-width: 60%;
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.qrBox {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin: 0px 30px 0px 0px;
  width: 50%;
  line-height: 30px;
}
.row {
  display: flex;
  justify-content: center;
}
.primary,
.danger {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-left: 12px;
  background: #409eff;
}
.texthidden {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 70%;
}
</style>
